import { memo, useEffect } from "react";
import { useDispatch } from "react-redux";
import { categoryChange, getData } from "../store/photo/photoSlice";
export interface CategoryItem {
  id?: string;
  name?: string;
  totalcnt?: string;
  create_time?: string;
  displaytype?: string;
  tempdata?: string;
}

export interface CategoryData {
  errno?: string;
  errmsg?: string;
  consume?: string;
  total?: string;
  data?: CategoryItem[]
}

export interface CategoryProps {
  initCategory: CategoryData,
  start: number
}


const YiCategory: React.FC<CategoryProps> = ({ initCategory, start }) => {
  const dispatch = useDispatch();

  const handleClick = (item: CategoryItem) => {

    dispatch<any>(getData({ categoryName: item.name, category: item.id, start: start, count: 24 }));

  }

  return (
    <div className="box-border p-2 w-screen">
      <h2 className="inline-block h-8 font-bold box-border mb-2 transition duration-500 hover:text-xl hover:font-black hover:translate-x-4 hover:bg-gradient-to-r from-white via-gray-500 to-gray-700 rounded-md">分类:</h2>
      <ul className="overflow-x-auto overflow-y-hidden flex justify-between w-full   py-2">
        {
          initCategory?.data?.map((item: CategoryItem) => {
            return <li key={item.id} onClick={() => {
              handleClick(item)
            }} className="mr-2 bg-gray-700 rounded-full text-white p-2 flex justify-center items-center hover:scale-110 cursor-pointer whitespace-nowrap">
              {item.name}
            </li>
          })
        }
      </ul>
    </div>
  )
}

export default memo(YiCategory)
